
function change(num){
    var lis = document.querySelectorAll('header p')
    var main = document.querySelectorAll('.main')
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = ''
        main[i].style.display='none'
    }
    main[num].style.display='block'
    lis[num].className='header1'
    getData(num);
}
// 声明一个函数，用来获取服务器的数据
function getData(index) {
    //获取后台数据的代码
    // dataUrl是服务器数据所在地址
    var dataUrl = 'http://81.71.65.4:3008/film/list?type='+(index+1);
    /**
     * 这段代码先照抄, 大概的意思是: 上面我们导入了axios.js, 
     * 然后这个js给我们提供了一个对象axios, 对象里有一个方法get,
     * 可以帮我们拿到服务器的数据, 格式就是下面这么的, 其中
     * dataUrl是服务器数据所在地址, 拿到数据之后, aixos对象的get方法会把数据放入result这个变量
     *  
     */
    axios.get(dataUrl).then(function (result) {
        // 我们的要的电影列表数据就放在result.data.data里
        var list = result.data.data;
        console.log(list);
        // 接下来就是把这个列表数据展示在页面上, 之前大家都做过了
        var str = '';
        for (var i = 0; i < list.length; i++) {
            var actorsName=''
            var lis=list[i].actors
            for(var j=0;j<lis.length;j++){
                if(j==0){
                    actorsName+=lis[j].name
                }else{
                    actorsName+=' | ' +lis[j].name
                }
            }
            var grades=''
            if(list[i].grade){
                grades=list[i].grade
            }else{
                grades=''
            }
            str +=
                `<a onclick="location.href='./details.html?id=${list[i].id}'">
                <div class="main1">
                    <img src="${list[i].poster}" alt="">
                    <div class="main2">
                        <div>
                            <p>${list[i].name} <span>${list[i].filmType.dx}</span></p>
                            <p>观众评分<span>${grades}</span></p>
                            <p>主演：${actorsName}</p>
                            <p>${list[i].nation} | ${list[i].runtime}分钟</p>
                        </div>
                        <button>购票</button>
                    </div>
                </div>
                </a>`
        }
         var aa=  document.querySelectorAll('.main')
         aa[index].innerHTML=str
    });
}
getData(0);